<template>
  <div class="login-page">
    <div>
      <img :src="kgjLogo" alt="考古加" srcset="" class="img-sty" />
      <div class="kgj">考古加</div>
    </div>
    <div class="split-line"></div>
    <div class="authorize-content">
      <div class="tip">考古加管理平台</div>
      <el-button type="primary" size="large" @click="openUrl">授权</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { oauthConnect } from '@/api/oauth';
import kgjLogo from '@images/kgj-logo-b.svg';
defineOptions({
  name: 'AuthorizationIndex'
});
const url = ref('');
const getLoginInfo = async () => {
  const { data } = await oauthConnect();
  url.value = data.url;
};
const openUrl = () => {
  if (url.value) {
    window.location.href = url.value;
  }
};

getLoginInfo();
</script>
<style lang="scss" scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: #fff;

  .img-sty {
    width: 200px;
    height: 200px;
  }

  .kgj {
    position: relative;
    top: -30px;
    font-size: 30px;
    text-align: center;

    // font-weight: 400;
    letter-spacing: .2em;
  }

  .split-line {
    width: 1px;
    height: 150px;
    margin: 0 50px;
    background: #f2f3f5;
  }

  .authorize-content {
    .tip {
      margin-bottom: $baseMarginBottom;
      font-size: 20px;
      line-height: 40px;
      color: #333;
    }
  }
}
</style>
